<template>
  <div class="postList-detail" style="background-color: antiquewhite;">
    <!-- 论坛标题 -->
    <h2 class="postList-title" style="text-align: center;">{{ postList.title }}</h2>
    <!-- 论坛内容 -->
    <div class="postList-content" style="text-indent: 2em; margin-bottom: 20px;">{{ postList.content }}</div>
    <!-- 点赞按钮 -->
    <div style="text-align: center; font-size: 100px;">
    <el-tag type="success" size="medium">来都来了，点个赞留个脚印再走吧😚！</el-tag>
    <el-button circle  @click="handleLike" :disabled="isLiked">👍{{ isLiked ? '已赞' : '点赞' }} {{ postList.likes }}</el-button>
    </div>
    <!-- 评论列表 -->
    <el-card class="comment-list">
      <h3 slot="header" class="comment-title">当前评论列表数为{{ comments.length }}</h3>
      <div v-for="(comment, index) in comments" :key="index" class="comment-item">
        <!-- 折叠评论 -->
        <el-collapse v-model="activeCommentIndex" accordion>
          <el-collapse-item :title="'用户ID'+comment.user_id + ' 评论于 ' + comment.time" :name="index">
            <div class="comment-content">{{ comment.content }}</div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <!-- 添加评论 -->
      <div class="add-comment" >
        <el-form ref="commentForm" :model="commentForm" label-width="80px">
          <el-form-item label="评论内容" required>
            <el-input v-model="commentForm.content" type="textarea" :rows="3" placeholder="请输入评论内容"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleComment">发布评论</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      postList: {
        postId:'',
        likes: '0'
      },
      isLiked: false,
      comments: [],
      commentForm: {
        content: ''
      },
      name: '',
      activeCommentIndex: ''
    };
  },
  // mounted() {
  //   // 在mounted钩子中获取参数id，并根据id请求论坛详情
  //   const id = this.$route.params.id;
  //   this.postList.postId = id;
  //   console.log(1253);
  //   console.log(id)
  // },
  created() {
    this.postList.postId = this.$route.params.id;
    console.log(this.postList.postId)
    // 获取论坛详情
    this.getPostList()
    // 获取评论列表
    this.getComments();
  },
  methods: {
    // 获取论坛详情
    getPostList() {
      this.request.post("/post/postList/" + this.postList.postId)
        .then(response => {
          this.postList = response.data.data.list;
          console.log("success")
        })
        .catch(error => {
          console.error(error);
        
        });
    },
    // 获取评论列表
    getComments() {
      this.request.post('/post/comments/' + this.postList.postId)
        .then(response => {
          console.log(response.data)
          this.comments = response.data.data.list;
        })
        .catch(error => {
          console.error(error);
        });
    },
    // 点赞
    handleLike() {
      if (this.isLiked) {
        return;
      }
      if(!this.$store.state.userInfo){
        this.$message.error("请登录后再进行此操作！");
      }
      else{
      this.request.post('/post/likes/'+this.$route.params.id )
        .then(response => {
          this.isLiked = true;
          this.postList.likes += 1;
          this.$message({
            message: "你的点赞就是对我的认可，蟹蟹٩('ω')و",
            type: 'success'
          })
        })
        .catch(error => {
          console.error(error);
        });
      }
    },
    //转换时间方法
    getDate() {
      //date是传过来的时间戳，注意需为13位，10位需*1000
      //也可以不传,获取的就是当前时间
      var time = new Date();
      var year = time.getFullYear()  //年
      var month = ("0" + (time.getMonth() + 1)).slice(-2); //月
      var day = ("0" + (time.getDate())).slice(-2); //日
      var mydate = year + "-" + month + "-" + day;
      return mydate
    },
    // 添加评论
    handleComment() {
      if(!this.$store.state.userInfo){
        this.$message.error("请登录后再进行此操作！");
      }
      else{
      this.$refs.commentForm.validate(valid => {
        if (valid) {
          this.request.post('/post/comment', {
            post_id: this.$route.params.id,
            content: this.commentForm.content,
            user_id: this.$store.getters.getUser.id,
            time: this.getDate()
          })
          .then(response => {
            this.comments.push({
              user_id:  this.$store.getters.getUser.id,
              username: this.$store.getters.getUser.username,
              content: this.commentForm.content,
              time: this.getDate()
            });
            this.$message.success("发表成功！");
            this.commentForm.content = '';
          })
          .catch(error => {
            console.error(error);
          });
        }
      });
      }
    }
  }
};
</script>
